<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./../../css/common.css">
    <script src="./../../js/tools.js"></script>
    <script src="./../../js/api_v1.js"></script>
    <script src="./../../js/cookie.js"></script>
</head>
<body>
    <div id="app" class="body content">
        <section>
            <table>
                <thead>
                    <input type="checkbox" >全选
                    <col span="1" >
                    <tr>
                        <th>序号</th>
                        <th>选中</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(data,index) in dataArr" v-bind:myid=data.id>
                        <td>{{index+1}}</td>
                        <td><input type="checkbox" v-if="data.flag" checked @click="data.flag=!data.flag"><input type="checkbox" v-else @click="data.flag=!data.flag"></td>
                        <td>{{data.pname}}</td>
                        <td>￥{{data.price}}</td>
                        <td><span @click="data.pnum>1?data.pnum--:data.pnum">-</span><span>{{data.pnum}}</span><span @click="data.pnum++">+</span></td>
                        <td>{{data.price * data.pnum}}</td>
                        <td v-on:click="delGood(index,data.id)">删除</td>
                    </tr>
                </tbody>
                
            </table>
            <button class="delAll">删除</button><span>总计：￥</span><span class="count">{{totalPrice}}</span>
        </section>
    </div>
    <div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        // let uid = getCookie("id");
        // if( !uid ){
        //     window.location.href = "./../../login.html" ;
        // }
        // getAllGoods();
        // async function getAllGoods(){
        //     let res = await getCarData({opt:'getList',uid});
        //     let data = res.map(item=>({...item,"flag":false,"is_delete":true})).filter(item=>item.is_delete);
        //     sessionStorage.setItem("data",JSON.stringify(data));
        //     renderDom();
        // }
        // async function delGood(id){
        //     let res = await getCarData({opt:'delData',id});
        //     if( res['status'] == 1 ){
        //         console.log('删除成功!');
        //         getAllGoods();
        //     } else {
        //         console.log('操作失败!');
        //         getAllGoods();
        //     }
        // }
        let res = [
            {"pname":"笔记本","price":"15","pnum":"7","pid":"105","id":"40","flag":false,"is_delete":true},
            {"pname":"水晶红薯粉","price":"20","pnum":"8","pid":"104","id":"39","flag":false,"is_delete":true},
            {"pname":"笔笔笔记本","price":"20","pnum":"6","pid":"107","id":"37","flag":false,"is_delete":true},
            {"pname":"充充充电宝","price":"15000","pnum":"5","pid":"108","id":"38","flag":false,"is_delete":true}
        ];
      
        // function renderDom(){
        //     let res = JSON.parse(sessionStorage.getItem("data"));
        //     console.log(res);
            let app = new Vue({
                el:'#app',
                data:{dataArr:res},
                methods:{
                    delGood(index,cartId){
                        this.dataArr.splice(index,1);
                        // delGood(cartId);
                    }
                },
                computed:{
                    totalPrice:function(){
                        let price = 0 ; 
                        this.dataArr.filter(item=>item.flag && item.is_delete).forEach(v=>{
                            price += v.pnum * v.price ; 
                        });
                        return price ; 
                    }
                }
            });
        // }
    </script>
   
</body>
</html>